<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vertical-scroll-snap</title>
    <style>
        .vertical-snap {
            display: grid;
            grid-auto-flow: row;
            gap: 1rem;
            margin: 0 auto;
            width: calc(180px + 1rem);
            padding: 1rem;
            height: 480px;
            overflow-y: auto;
            overflow-x: hidden;
            overscroll-behavior-y:contain;
            scroll-snap-type: y mandatory;
        }
        .vertical-snap-link {
            scroll-snap-align: center;
        }
        .vertical-snap-img {
            width: 180px;
            object-fit: contain;
            border-radius: 1rem;
        }
        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
            background-color: #535455;
        }
        ::-webkit-scrollbar-thumb {
            width: 5px;
            height: 5px;
            background-color: #2396ef;
        }
    </style>
</head>
<body>
    <div class="vertical-snap">
        <a href="#" target="_blank" rel="noopener noreferrer" class="vertical-snap-link">
            <img src="https://www.eveningwater.com/img/segmentfault/1.png" alt="图片加载中" class="vertical-snap-img" />
        </a>
        <a href="#" target="_blank" rel="noopener noreferrer" class="vertical-snap-link">
            <img src="https://www.eveningwater.com/img/segmentfault/2.png" alt="图片加载中" class="vertical-snap-img" />
        </a>
        <a href="#" target="_blank" rel="noopener noreferrer" class="vertical-snap-link">
            <img src="https://www.eveningwater.com/img/segmentfault/3.png" alt="图片加载中" class="vertical-snap-img" />
        </a>
        <a href="#" target="_blank" rel="noopener noreferrer" class="vertical-snap-link">
            <img src="https://www.eveningwater.com/img/segmentfault/4.png" alt="图片加载中" class="vertical-snap-img" />
        </a>
        <a href="#" target="_blank" rel="noopener noreferrer" class="vertical-snap-link">
            <img src="https://www.eveningwater.com/img/segmentfault/5.png" alt="图片加载中" class="vertical-snap-img" />
        </a>
        <a href="#" target="_blank" rel="noopener noreferrer" class="vertical-snap-link">
            <img src="https://www.eveningwater.com/img/segmentfault/6.png" alt="图片加载中" class="vertical-snap-img" />
        </a>
        <a href="#" target="_blank" rel="noopener noreferrer" class="vertical-snap-link">
            <img src="https://www.eveningwater.com/img/segmentfault/7.png" alt="图片加载中" class="vertical-snap-img" />
        </a>
        <a href="#" target="_blank" rel="noopener noreferrer" class="vertical-snap-link">
            <img src="https://www.eveningwater.com/img/segmentfault/8.png" alt="图片加载中" class="vertical-snap-img" />
        </a>
        <a href="#" target="_blank" rel="noopener noreferrer" class="vertical-snap-link">
            <img src="https://www.eveningwater.com/img/segmentfault/9.png" alt="图片加载中" class="vertical-snap-img" />
        </a>
    </div>
</body>
</html>